<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="市容顽症在办事件"
        left-text=""
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <div class="chart">
        <div class="chart-echars" id="working-events-chart"></div>
        <div class="chart-length">
            <div class="chart-length-box" v-for="(item,index) in chartLegend" :key="index">
                <span class="lable"></span>
                <span class="text">{{item}}</span>
            </div>
        </div>
    </div>
    <div class="sub">
        <div class="sub-item" v-for="(item,index) in list" :key="index" @click="handBtn(index)">
            <div class="icon-bg"></div>
            <div class="content">
                <span class="content-value">{{item.value}}</span>
                <span class="content-text">{{item.name}}</span>
                <span class="content-lable">{{item.lable}}</span>
            </div>
            <div class="icon"></div>
        </div>
    </div>
  </div>
</template>

<script>
import { workGarStatistical } from '../../../utils/api'
export default {
  name: "workingEvents",
  data() {
    return {
        chartLegend:['垃圾分类','建筑垃圾偷倒'],
        chart:[40,60],
        list:[
            {name:'建筑垃圾偷倒',value:'60%',lable:''},
            {name:'垃圾分类',value:'40%',lable:'*包括垃圾箱满溢和小包垃圾丢弃'},
        ],
        dataStealDown:[]
    };
  },
  mounted() {
    workGarStatistical().then((res)=>{
      if(res.code == 200){
        this.list[0].value = res.data.buildGarbageRate;
        this.list[1].value = res.data.garbageClassifyRate;
        this.chart[0] = res.data.garbageClassifyCount;
        this.chart[1] = res.data.buildGarbageCount;
      }
    })
    this.setEchar(this.chart)
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/" });
    },

    setEchar(datas){
      let _this = this;
      let angle = 0;
      let myChart = _this.$echarts.init(document.getElementById('working-events-chart'));
      let option = {
        grid: {
            top: '10%',
            right: '10%',
            bottom: '10%',
            left: '20%',
        },
        tooltip: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: [{
            name: '',
            type: 'pie',
            // label: {
            //     normal: {
            //        show:true,
            //         // formatter: '{c}',
            //         position: 'inside',
            //         formatter: (params) => {
            //              debugger
            //             // return  params.name + '\n' + params.value+'%'
            //             return params.value + '%';
            //         },
            //         fontSize: 12,
            //     },
            // },

            itemStyle:{
                color: function(params) {
                    var colorList = [
                    {
                        c1: '#FF9A67',  //10,185,235
                    },
                    {
                        c1: '#73CDFF', //255,216,33
                    },]
                        return new _this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                        { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                            offset: 0,
                            color: colorList[params.dataIndex].c1
                        }])
                        /*  return colorList[params.dataIndex]*/
                },
            },
            center:['50%' ,'50%'],
            label:{
                show:false
            },
            clockWise: false,
            radius: [55 , 75 ],
            hoverAnimation: false,
            data: datas
        },
        {
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                return {
                    type: 'arc',
                    position: ['-50%' , 0] ,
                    shape: {
                        cx: api.getWidth() / 2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.3,
                        startAngle: (270+-angle) * Math.PI / 180,
                        endAngle: (630+-angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#666666",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        },
        {
            name: "ring5",  //绿点
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function(params, api) {
                let x0 = api.getWidth() / 2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.3;
                let point = _this.getCirlPoint(x0, y0, r, (270+-angle))
                return {
                    type: 'circle',
                    position: ['-50%' , 0] ,
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#01DB90",      //绿
                        fill: "#01DB90"
                    },
                    silent: true
                };
            },
            data: [0]
        }]

      }
      function draw(){
          angle = angle+3
          myChart.setOption(option, true)
      }
      clearInterval(_this.timer)
      _this.timer = setInterval(function() {
          //用setInterval做动画感觉有问题
          draw()
      }, 100);
      myChart.setOption(option, true);
    },
    getCirlPoint(x0, y0, r, angle) {
            let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
            let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
            return {
                x: x1,
                y: y1
            }
      },
    // getFontSize(size){
    //     const fontSize = parseFloat(document.documentElement.style.fontSize.replace('px',''))
    //     const _size = (fontSize * size) / 37.5
    //     return _size
    // }
    handBtn(i){
        if(i === 0){
            // this.$router.push({ name: "garbageDumped",params: {lists:this.dataStealDown} });
            this.$router.push({ path: "/workingEventsMain/garbageDumped" });
        }else{
            this.$router.push({ path: "/workingEventsMain/garbageClassification" });
            // this.$router.push({ path: "/workingEventsMain/messageCard/gridEvents" });
        }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  width: 100%;

  height: 46px;
  background: #00c4c6;
}
.chart{
    width: 100%;
    height: 230px;
    border-radius: 4px;
    margin: auto;
    margin-top: 20px;
    background-image: url('~@/assets/img/workingEvents/events-found-chart.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
}
.chart-echars{
    width: 58%;
    height: 94%;
    margin-top: 1.5%;
    margin-left: 2%;
}
.chart-length{
    width: 36%;
    height: 60px;
    margin: auto 0;
    background-color:#FFFFFF;
}
.chart-length-box{
    width: 100%;
    height: 30px;
    display: flex;
}
.lable{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 7px 5px;
}
.chart-length-box:nth-child(1) .lable{
    background: linear-gradient(0deg, #FF6B60 0%, #FF8E65 100%);
}
.chart-length-box:nth-child(2) .lable{
    background: linear-gradient(0deg, #5CA1FF 0%, #6FC5FF 100%);
}
.text{
    display: inline-block;
    width: 80%;
    height: 30px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}
.sub {
  width: 90%;
  height: 210px;
  margin: auto;
  margin-top: 40px;
  overflow: hidden;
  /* display: flex; */
}
.sub-item{
    width: 100%;
    height: 100px;
    display: flex;
    border-radius: 10px;
    background: #FFFFFF;
}
.sub-item:nth-child(2){
    margin-top: 10px;
}
.icon-bg{
    width: 60px;
    height: 60px;
    margin-top:20px;
    margin-left: 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.sub-item:nth-child(1) .icon-bg{
    background-image: url('~@/assets/img/workingEvents/events-found-steal.png');
}
.sub-item:nth-child(2) .icon-bg{
    background-image: url('~@/assets/img/workingEvents//events-found-regulatory.png');
}
.content{
    width: 60%;
    height: 70px;
    margin: 15px 10px;
}
.content-value{
    display: inline-block;
    width: 100%;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #4472C4;
    line-height: 30px;
}
.content-text{
    display: inline-block;
    width: 100%;
    height: 25px;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}
.sub-item:nth-child(2) .content-value{
    color: #ED7D31;
}

.content-lable{
    font-size: 12px;
    font-weight: 400;
    color: #666666;
}
.icon{
    width: 33px;
    height: 34px;
    margin: auto;
    background-image: url('~@/assets/img/workingEvents//router-right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
</style>
